<template>
  <header class="top-nav-bar">
    <van-nav-bar class="header"
                 fixed
                 :border="false"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 :zIndex="200" >
      <div class="header-title"
           slot="title">{{ title }}</div>
      <img class="goback"
           src="/static/icon/goback.png"
           v-if="goback"
           slot="left" />
      <img class="delete"
           src="/static/icon/delete.png"
           v-if="remove"
           slot="right" />
    </van-nav-bar>
  </header>
</template>

<script>
export default {
  methods: {
    onClickLeft () {
      console.log("返回");
      this.$router.go(-1)
    }, onClickRight () {
      this.$emit('remove')
    }
  },
  props: {
    title: {
      type: String
    },
    goback: {
      type: Boolean,
      default: false
    }, remove: {
      type: Boolean,
      default: false
    },
  }
};
</script>
<style lang='scss' scoped>
.top-nav-bar {
  .header {
    background-color: #06a44f;
    height: 42px;
    .header-title {
      color: #fff;
      font-size: 15px;
      font-family: Microsoft YaHei;
      height: 42px;
      line-height: 42px;
    }
    .goback{
      left: -2px;
      top: 4px;
      position: relative;
      width: 8px;
      height: 13px;
    }
    .delete {
      right: -4px;
      top: 6px;
      position: relative;
      width: 15px;
      height: 18px;
    }
  }
}
</style>